<template>
  <div class="page-content">
    <a-card style="width: 100%; height: 100%" v-if="!showDetail && !showUgring">
      <div class="header">
        <Condition
          :condition="condition"
          :btns="['search', 'reset']"
          @search="searchHandle"
          @reset="reset"
        />
        <span> 共筛选出 {{ pagination.total }} 条数据 </span>
      </div>
      <div class="main">
        <a-table
          class="table table-tree"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
          rowKey="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'peOrgType'">
              <a-tag
                style="color: #00b42a; background-color: #e8ffea; border: 1px solid #00b42a"
                v-if="record.peOrgType == 0"
                >独立</a-tag
              >
              <a-tag
                style="color: #3491fa; background-color: #e8f7ff; border: 1px solid #3491fa"
                v-else-if="record.peOrgType == 1"
                color="green"
                >一级</a-tag
              >
              <a-tag
                style="color: #0fc6c2; background-color: #e8fffb; border: 1px solid #0fc6c2"
                v-else-if="record.peOrgType == 2"
                color="orange"
                >二级</a-tag
              >
              <a-tag
                style="color: #f7ba1e; background-color: #fffce8; border: 1px solid #f7ba1e"
                v-else-if="record.peOrgType == 3"
                color="red"
                >三级</a-tag
              >
            </template>
            <template v-else-if="column.dataIndex === 'createTime'">
              <span>
                {{
                  record.createTime ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
                }}
              </span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="getGroupPerson(record)">体检员工</a-button>
              <a-button type="link" @click="getUrgingTask(record)">待办任务</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
    <GroupPerson ref="groupPersonRef" v-if="showDetail" @close="goBack" />
    <UrgingTask ref="urgingTaskRef" v-if="showUgring" @close="goBack" />
  </div>
</template>
<script lang="ts" setup>
import Condition from '@/components/ConditionSearch/index.vue'
import { ref, onMounted, reactive } from 'vue'
import dayjs from 'dayjs'
import GroupPerson from './groupPerson.vue'
import UrgingTask from './urgingTask.vue'
import { getGroupInspectionPage } from './groupInspection.api'

const showDetail = ref(false)
const showUgring = ref(false)
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const condition = ref([
  {
    title: '',
    dataIndex: 'peOrgName',
    type: 'input',
    value: '',
    placeholder: '请输入企业名称/企业ID'
  },
  {
    title: '企业类型',
    dataIndex: 'peOrgType',
    type: 'select',
    data: [
      {
        label: '独立',
        value: 0
      },
      {
        label: '一级',
        value: 1
      },
      {
        label: '二级',
        value: 2
      },
      {
        label: '三级',
        value: 3
      }
    ],
    value: undefined,
    placeholder: '请选择'
  }
])
const columns = ref<any[]>([
  {
    title: '企业名称',
    dataIndex: 'peOrgName',
    key: 'peOrgName',
    align: 'left'
  },
  {
    title: '企业类型',
    dataIndex: 'peOrgType',
    key: 'peOrgType',
    align: 'left'
  },
  {
    title: '企业ID',
    dataIndex: 'peOrgId',
    key: 'peOrgId',
    align: 'left'
  },
  {
    title: '人数',
    dataIndex: 'staffCount',
    key: 'staffCount',
    align: 'left'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 160
  }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'createTime') {
        return Object.assign(c, {
          begin: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          end: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})

  getGroupInspectionPage({
    ...obj,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      const data = res.data.list
      data.forEach((v: any) => {
        if (v.children) {
          changeChild(v)
        }
      })
      List.value = JSON.parse(JSON.stringify(data))

      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

// children为空时置null
const changeChild = (data) => {
  if (data.children.length == 0) {
    data.children = null
  } else {
    data.children.forEach((v) => {
      changeChild(v)
    })
  }
}

onMounted(() => {
  loading.value = true
  getDataList()
})

const groupPersonRef = ref()
const getGroupPerson = (data: any) => {
  showDetail.value = true
  nextTick(() => {
    if (groupPersonRef.value) {
      groupPersonRef.value.init(data.peOrgId, data.peOrgName)
    }
  })
}

const urgingTaskRef = ref()
const getUrgingTask = (data: any) => {
  showUgring.value = true

  nextTick(() => {
    if (urgingTaskRef.value) {
      urgingTaskRef.value.init(data.peOrgId, data.peOrgName)
    }
  })
}

const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}
const goBack = (value) => {
  showDetail.value = false
  showUgring.value = false
  loading.value = true
  getDataList()
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
}
</style>
<style>
.table-tree .ant-table .ant-table-body .ant-table-tbody .ant-table-row-level-1 {
  background: #f7f8fa;
}

.table-tree .ant-table .ant-table-body .ant-table-tbody .ant-table-row-level-2 {
  background: #f2f3f5;
}

.table-tree .ant-table .ant-table-body .ant-table-tbody .ant-table-row-expand-icon {
  background: #e5e6eb;
}

.table-tree .ant-table .ant-table-body .ant-table-row-expand-icon:hover {
  color: inherit;
  border-color: #e5e6eb;
}

.table-tree .ant-table:not(.ant-table-bordered) .ant-table-body .ant-table-tbody > tr > td {
  border-top: 1px solid #e5e6eb;
}
</style>
